<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单 - 简易商城</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            padding-top: 40px; /* 增加页面顶部间距 */
            background-color: #f0f2f5; /* 更柔和的背景色 */
        }
        .container {
            max-width: 960px; /* 拓宽容器 */
            background-color: #ffffff;
            padding: 40px; /* 增加内边距 */
            border-radius: 12px; /* 更圆润的边角 */
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); /* 更明显的阴影效果 */
        }
        h2 {
            color: #343a40;
            margin-bottom: 30px; /* 标题下方更多间距 */
            font-weight: 600;
        }
        .table {
            margin-bottom: 25px; /* 表格下方间距 */
        }
        .table th, .table td {
            vertical-align: middle;
            padding: 12px; /* 增加表格单元格内边距 */
            font-size: 0.95rem;
        }
        .table thead th {
            background-color: #e9ecef; /* 表头背景色 */
            border-bottom: 2px solid #dee2e6; /* 表头底部边框 */
        }
        .table tbody tr:hover {
            background-color: #f8f9fa; /* 行悬停效果 */
        }
        .status-badge {
            padding: .4em .8em; /* 调整徽章内边距 */
            border-radius: .3rem; /* 调整徽章圆角 */
            font-size: 0.85rem;
            font-weight: 500;
            display: inline-block; /* 确保背景色完整显示 */
        }
        .status-0 { background-color: #ffc107; color: #6a5700; } /* 待支付 - 黄色系 */
        .status-1 { background-color: #28a745; color: white; } /* 已支付 - 绿色系 */
        .status-2 { background-color: #6c757d; color: white; } /* 已取消 - 灰色系 */

        .btn-group-sm > .btn, .btn-sm {
            padding: .35rem .7rem; /* 统一小按钮大小 */
            font-size: .875rem;
            border-radius: .2rem;
        }
        .btn-action-group {
            display: flex; /* 使用flex布局让按钮并排 */
            gap: 8px; /* 按钮之间间隔 */
        }
        .alert {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="text-center">我的订单</h2>

        {if empty($orders)}
        <div class="alert alert-info text-center" role="alert">
            您还没有任何订单。去 <a href="{:url('index/index')}" class="alert-link">浏览商品</a> 吧！
        </div>
        {else}
        <div class="table-responsive"> {/* 使表格在小屏幕上可滚动 */}
            <table class="table table-bordered table-striped table-hover">
                <thead>
                    <tr>
                        <th>订单号</th>
                        <th>总金额</th>
                        <th>下单时间</th>
                        <th>支付时间</th>
                        <th>订单状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {volist name="orders" id="order"}
                    <tr>
                        <td>{$order.order_sn}</td>
                        <td><strong class="text-danger">¥{$order.total_price|number_format=2}</strong></td>
                        <td>{$order.create_time ?: '暂无'}</td>
                        <td>{$order.pay_time ?: '暂无'}</td>
                        <td><span class="status-badge status-{$order.order_status}">{$order.order_status_text}</span></td>
                        <td>
                            <div class="btn-action-group">
                                <a href="{:url('index/orderDetail', ['orderId' => $order.id])}" class="btn btn-info btn-sm">查看详情</a>
                                {if $order.order_status == 0}
                                <a href="{:url('index/payOrder', ['orderId' => $order.id])}" class="btn btn-success btn-sm" onclick="return confirm('确定要支付此订单吗？');">立即支付</a>
                                {/if}
                            </div>
                        </td>
                    </tr>
                    {/volist}
                </tbody>
            </table>
        </div>
        {/if}

        <div class="text-center mt-4">
            <a href="{:url('index/index')}" class="btn btn-primary btn-lg">继续购物</a>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>